<template>
  <view class="consultant-page">
    <view class="product-classify">
      <view class='classify-item'>
         <view
              :class="['item',tagActive==1 ? 'active' :'']"
              data-id="1"
              @click="chooseTag"
            >
            <view class="icon"> 
             <image
                 src="../static/images/icon-contact.png"
                mode="scaleToFill"
                lazy-load="false">
              </image>
            </view>
           <view class="text">图文咨询</view>
        </view>
        <view  class="line"></view>
          <view
              :class="['item',tagActive==0 ? 'active' :'']"
              data-id="0"
              @click="chooseTag"
            >
            <view class="icon"> 
             <image
                src="../static/images/icon-consultation.png"
                mode="scaleToFill"
                lazy-load="false">
              </image>
            </view>
           <view class="text">电话咨询</view>
        </view>
      </view>
    </view>
    <view class="product-list">
        <view
            class="product-persons"
            v-for="(item,index) in personList"
            :key="index"
            :data-id="item.cid"
            :data-uid="item.uid"
            @click="navigateUrl"
          >
          <PersonInfo :PersonInfo="item" @assessFn="evaluateBtn"/>
        </view>
    </view>
     <uni-load-more v-if="personList.length>=8" :personList="personList"></uni-load-more>
      <view v-if="personList.length==0">
        <noData/>
      </view>
    <view class='popup' @touchmove.prevent v-if="popup.isComment">
     <view class='comment' @touchmove.prevent>
        <view class="stars">
            <image
             @click='starRecord'
              v-for="(item,index) in 5"
              :data-id='index+1' 
              :key="index"
              :src="index+1<=starNum ? '../static/images/icon_star_active.png': '../static/images/icon_star.png'"
              mode="scaleToFill"
              lazy-load="false">
            </image>
        </view>
        <view class="content">
             <textarea
              maxlength="100"
              value=""
              placeholder-class="placeholder"
              v-model="content"
              @input="changeArea"
              placeholder="顾问还满意吗？说说他/她的优点或美中不足吧"
              />
        </view>
        <view class="submit-btn" @click="submitFn">
            提交
        </view>
    </view>
  <view class='popup popup-mask' @touchmove.prevent v-if="popup.isComment" @click="closeModule"></view>
  </view>
  </view>
</template>

<script>
import Vue from "vue"
import InterServer from "@/common/config/server"
import noData from '@/components/noData/noData';
import PersonInfo from "@/components/personInfo/personInfo.vue";
import { isLogin } from "@/common/utils/util";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
import {localStorageSyncServer} from '@/common/js/common'
export default {
  components: {
    PersonInfo,
    uniLoadMore,
    noData
  },
  data() {
    return {
      tagActive: 1,
      starNum:0,
      popup:{
        isComment:false
      },
      pageNum:0,
      pageSize:10,
      totalPage:0,
      personList: [],
      content:"",
      loadingType:0, //加载类型0（loading前），1（loading中），2（没有更多了）
      pageNumber:0,
    };
  },
  onLoad() {
    
  },
  onShow(){
    // #ifdef H5
        document.title=`我的咨询`
    // #endif
    this.userInfo = localStorageSyncServer.get("userInfoId")
     isLogin().then(res => {
        if (res) {
           this.advisoryList()
        }
     })

  },
  onHide(){
    this.personList.length=0;
    this.loadingType=1;
    this.tagActive=1;
    this.pageNum=0;
    this.closeModule()
  },
     //上拉加载
  onReachBottom(){
   this.pageNum=this.pageNum+1;
    if(this.pageNumber+1<this.knowTotalPage){
      this.loadingType=1
        this.advisoryList() //获取顾问列表
    }else{
      this.loadingType=2
    }
  },
  methods: {
    //标签切换
    chooseTag(e) {
      console.log(e.currentTarget.dataset.id)
      this.tagActive =Number(e.currentTarget.dataset.id);
      this.loadingType=1;
      this.pageNum=0;
      if(this.userInfo){
        this.personList.length=0;
        this.advisoryList();
      }
    },
    //获取页面数据
    advisoryList(){
        InterServer.advisoryList({
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          type:this.tagActive
        }).then(res=>{
          if(res.code==200){
              this.personList=this.personList.concat(res.data.dataList);
              this.totalPage=res.data.totalPage
              this.pageNumber=res.data.pageNumber;
          }
        })
    },
    //页面跳转
    navigateUrl(e) {
      let id=e.currentTarget.dataset.id;
      let uid=e.currentTarget.dataset.uid;
      let url = `./consultantDetails?recordType=${this.tagActive}&id=${id}&uid=${uid}`;
      Vue.customNavigateTo(url);
    },
    //点击评价按钮
    evaluateBtn(e) {
      console.log(e)
      this.cid=e.currentTarget.dataset.cid
      this.popup.isComment=true;
    },
      //关闭模板
    closeModule() {
      let _that = this;
      console.log('isComment', _that.popup.isComment)
      _that.popup.isComment = false;
    },
    //文本框输入
    changeArea(e){
        this.content=e.detail.value
    },
    //星级评价
    starRecord(e){
      this.starNum=e.currentTarget.dataset.id
    },
    //提交按钮
    submitFn(){
      if(this.starNum==0){
           Vue.showCustomToast("请选择星级评价")
           return
      }
      this.advisoryCommentl()
      this.closeModule()
       Vue.showCustomToast("提交成功")
    },
    //对专家进行评论
    advisoryCommentl(){
       InterServer.advisoryCommentl({
        cid: Vue.globalData.userInfo.userInfoId,
        chatType: this.tagActive==1? "在线":"电话",
        bid: this.cid,
        commentType: this.tagActive,
        content:this.content,
        status: this.starNum==1 ? "不满意" : this.starNum==5 ? "很满意" : "满意",
       }).then(res=>{

       })
    }
  }
};
</script>

<style lang="less" scoped>
.consultant-page {
  overflow: hidden;
  .product-classify {
    margin-top: 1upx;
    height: 230upx;
    background: url("../static/images/myAdvice-pic.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    .classify-item{
      display: flex;
      color: #303030;
      font-size: 30upx;
      position: absolute;
      top: 70upx;
      left: 50%;
      width:702upx;
      height:175upx;
      margin-left: -351upx;
      padding: 22upx  22upx 38upx;
      background:rgba(255,255,255,1);
      box-shadow:0upx 4upx 6upx rgba(0,0,0,0.16);
      border-radius:20upx 20upx 0upx 0upx;
      justify-content: space-between;
      align-items: center;
      box-sizing:border-box;
    }
    .item {
      width: 328upx;
      height: 115upx;
      text-align: center;
      color:rgba(124,124,124,1);
      border-bottom:1upx solid rgba(206,204,204,1);
    }
    .line{
      width:1upx;
      height:40upx;
      background:rgba(112,112,112,0.24);
    }
    .icon{
      margin-bottom: 4upx;
      height: 56upx;
      image{
        width: 56upx;
        height: 56upx;
      }
    }
    .text{
      font-size:30upx;
      font-family:PingFang-Semibold;
      font-weight:bold;
      line-height:39upx;
      
    }
    .active {
      border-bottom: 6upx solid #105ffe;
      color:rgba(50,50,50,1);
    }
  }
  .product-list{
     margin-top: 50upx;
    .product-persons {
      margin: 24upx;
    }
  }
  .popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  .popup-mask{
     background: rgba(0, 0, 0, 0.6);
      z-index: 1000;
  }
  .comment {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    height: 650upx;
    z-index: 1100;
    margin: -300upx auto 0;
    width: 600upx;
    background: #ffffff;
    border-radius: 10upx;
    .stars {
      display: flex;
      margin: 0 auto;
      padding: 80upx 152upx;
      image {
        width: 37upx;
        height: 34upx;
        margin-left: 28upx;
      }
    }
    .submit-btn {
      width: 360upx;
      height: 88upx;
      background: rgba(35, 106, 246, 1);
      border-radius: 10upx;
      text-align: center;
      line-height: 88upx;
      color: #ffffff;
      margin: 72upx auto 0;
    }
    .content{
       margin:0 auto;
       width: 480upx;
       height: 200upx;
       padding: 20upx;
       background: rgba(241, 246, 255, 1);
       border: 1px solid rgba(96, 150, 255, 1);
    }
    textarea {
      width:100%;
      height:100%;
      border-radius: 10upx;
      font-size: 30upx;
    }
     .placeholder{
      font-size: 30upx;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(187, 187, 187, 1);
      line-height: 36upx;
    }
  }
}
}
</style>
